<template>
  <DialogAddSwiper ref="addSwiper" :reload="getCarousels" :type="type" />
  <el-card class="swiper-container">
    <div class="header">
      <el-button
        type="primary"
        size="small"
        icon="el-icon-plus"
        @click="handleAdd"
        >增加</el-button
      >
      <el-popconfirm
        title="确定删除吗？"
        confirmButtonText="确定"
        cancelButtonText="取消"
        @confirm="handleDelete"
      >
        <template #reference>
          <el-button type="danger" size="small" icon="el-icon-delete"
            >批量删除</el-button
          >
        </template>
      </el-popconfirm>
    </div>
    <el-table
      :load="loading"
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column label="轮播图" width="200">
        <template #default="scope">
          <img
            style="width: 150px; height: 150px"
            :src="scope.row.carouselUrl"
            alt="轮播图"
          />
        </template>
      </el-table-column>
      <el-table-column label="跳转链接">
        <template #default="scope">
          <a target="_blank" :href="scope.row.redirectUrl">{{
            scope.row.redirectUrl
          }}</a>
        </template>
      </el-table-column>
      <el-table-column prop="carouselRank" label="排序值" width="120">
      </el-table-column>
      <el-table-column prop="createTime" label="添加时间" width="200">
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="pageSize"
      :current-page="currentPage"
      @current-change="changePage"
    />
  </el-card>
</template>

<script>
import { onMounted, reactive, ref, toRefs } from "vue";
import axios from "@/utils/axios";
import DialogAddSwiper from "../components/DialogAddSwiper.vue";
import { ElMessage } from "element-plus";
export default {
  name: "swiper",
  components: {
    DialogAddSwiper,
  },
  setup() {
    const addSwiper = ref(null); //vue3对ref的写法，一定要在setup函数中return给template
    const state = reactive({
      loading: false, //控制加载动画
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      type: "add",
      multipleSelection: [], //选中项，
      total: 0,
    });
    onMounted(() => {
      getCarousels();
    });
    const getCarousels = () => {
      state.loading = true;
      axios
        .get("/carousels", {
          params: {
            pageNumber: state.currentPage,
            pageSize: state.pageSize,
          },
        })
        .then((res) => {
          state.tableData = res.list;
          state.total = res.totalCount;
          state.currentPage = res.currPage;
          state.loading = false;
        });
    };
    const changePage = (val) => {
      state.currentPage = val;
      getCarousels();
    };
    // 添加轮播图
    const handleAdd = () => {
      state.type = "add";
      addSwiper.value.open();
    };
    // 修改轮播图
    const handleEdit = (id) => {
      state.type = "edit";
      addSwiper.value.open(id);
    };
    const handleSelectionChange = (val) => {
      state.multipleSelection = val;
    };
    // 批量删除
    const handleDelete = () => {
      if (!state.multipleSelection.length) {
        ElMessage.error("请选择项");
        return;
      }
      axios
        .delete("/carousels", {
          data: {
            ids: state.multipleSelection.map((i) => i.carouselId),
          },
        })
        .then(() => {
          ElMessage.success("删除成功");
          getCarousels();
        });
    };
    return {
      ...toRefs(state),
      addSwiper,
      handleAdd,
      handleEdit,
      getCarousels, //获取轮播图列表接口返回，弹窗内部添加后，需要刷新列表
      handleSelectionChange,
      handleDelete,
      changePage,
    };
  },
};
</script>

<style>
</style>